<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ref通信</title>
    <script src="lib/vue.js"></script>
</head>

<body>
    <div id="box">
        <!-- 不适用v-model 拿值-->
        <input type="text" ref="mytext">
        <button @click="handleAdd">Add</button>
        <hr>
        <button @click="handleRef">ref-click</button>
        <child ref="mychild"></child>

    </div>

    <script>
        //子组件
        Vue.component("child", {
            template: `<div>
        child
        </div>`,
            data() {
                return {
                    childname: "子组件的状态"
                }
            },
            methods: {

                //有消息来自老子了(data)了，可以接收了
                chiildAdd(data) {
                    console.log("子组件的方法", data);
                }
            }
        })

        new Vue({
            el: "#box",
            data: {

            },
            /*
            1.ref放在标签上，拿到的是dom原生节点
            2.ref放在组件上，拿到的是组件对象,父组件对子组件有绝对的控制权了
            */
            methods: {
                handleAdd() {
                    console.log(this);
                    console.log(this.$refs.mytext);
                    console.log(this.$refs.mytext.value);
                },
                handleRef() {
                    //父控制子--相当于子传父，只不过是父亲直接控制子组件了然后自己拿了
                    console.log(this.$refs.mychild);
                    console.log(this.$refs.mychild.childname);
                    console.log(this.$refs.mychild.chiildAdd);
                    // this.$refs.mychild.chiildAdd();
                    //父传子- 我给你消息了(传参了)，你就可以接收了
                    this.$refs.mychild.chiildAdd("----老子给你消息了,son!");
                }
            }
        })
    </script>

</body>

</html>